<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Factory - Server Test</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 2rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .test-container {
            max-width: 600px;
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 3rem;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .status {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin: 2rem 0;
            font-size: 1.2rem;
        }
        .status-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #4caf50;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.7; }
            100% { transform: scale(1); opacity: 1; }
        }
        .link {
            color: #ffffff;
            text-decoration: none;
            margin: 1rem 0;
            display: inline-block;
            padding: 0.5rem 1rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            transition: all 0.3s ease;
        }
        .link:hover {
            background: rgba(255, 255, 255, 0.2);
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🎉 Page Factory 开发服务器正常运行</h1>

        <div class="status">
            <div class="status-icon"></div>
            <span>开发服务器正在 http://localhost:3001 运行</span>
        </div>

        <p>Vue3 + 微前端架构开发平台已成功启动！</p>

        <div style="margin: 2rem 0;">
            <p>🚀 已创建的微前端模块：</p>
            <ul style="list-style: none; padding: 0; display: inline-block; text-align: left;">
                <li>✨ AI起名小程序 - /ai-naming</li>
                <li>📄 Office转PDF - /office-pdf</li>
                <li>🤖 AI聊天机器人 - /ai-bot</li>
            </ul>
        </div>

        <div style="margin: 2rem 0;">
            <a href="/ai-naming" class="link">访问 AI起名小程序</a>
            <a href="/office-pdf" class="link">访问 Office转PDF</a>
            <a href="/ai-bot" class="link">访问 AI聊天机器人</a>
        </div>

        <div style="margin-top: 2rem; font-size: 0.9rem; opacity: 0.8;">
            <p>💡 提示：如果看到白屏，请检查浏览器控制台是否有错误信息</p>
            <p>🔧 开发服务器已启用热重载，修改代码会自动刷新</p>
        </div>
    </div>
</body>
</html>